<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
  <div class="down_canvas">
    <!---------------------------|导航树 -->
    <div class="down_canvas_left">
      <NAnchor style="z-index: 1">
        <NAnchorLink title="画布" href="#CanvasAttrsCanvas" style="margin-top: 5px" />
        <NAnchorLink title="格栅" href="#CanvasAttrsGrid" />
        <NAnchorLink title="光标" href="#CanvasAttrsCursor" />
        <NAnchorLink title="捕捉" href="#CanvasAttrsCatch" />
      </NAnchor>
    </div>
    <!---------------------------|工具按钮 -->
    <div class="container_tool">
      <div style="width: 5px"></div>
      <div class="h_flex_column_around">
        <!-- 新建页面 -->
        <NTooltip placement="bottom" trigger="hover">
          <template #trigger>
            <svg class="h_svg_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
              version="1.1" :width="IconSize" :height="IconSize" viewBox="0 0 1024 1024"
              v-html="onGetDataManagerIcon('dataNewIcon')" @click="onCreateNewPage()"></svg>
          </template>
          <span>新建页面</span>
        </NTooltip>
        <!-- 复制参数 -->
        <NTooltip placement="bottom" trigger="hover">
          <template #trigger>
            <svg class="h_svg_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
              version="1.1" :width="IconSize" :height="IconSize" viewBox="0 0 1024 1024"
              v-html="onGetDataManagerIcon('dataCopyIcon')" @click="onCopyPageCanvasInfo()"></svg>
          </template>
          <span>复制画布参数</span>
        </NTooltip>
        <!-- 粘贴参数 -->
        <NTooltip placement="bottom" trigger="hover">
          <template #trigger>
            <svg class="h_svg_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
              version="1.1" :width="IconSize" :height="IconSize" viewBox="0 0 1024 1024"
              v-html="onGetDataManagerIcon('pasteIcon')" @click="onPastePageCanvasInfo()"></svg>
          </template>
          <span>粘贴画布参数</span>
        </NTooltip>
      </div>
      <div style="width: 20px"></div>
    </div>
    <!---------------------------|属性 -->
    <div class="down_canvas_middle">
      <!---------------------------|画布 -->
      <div id="CanvasAttrsCanvas" class="anchor_link">
        <!-- 画布缩放 -->
        <div class="h_info">
          <text class="h_info_lable">画布缩放:</text>
          <div class="h_flex_column h_info_val">
            <NSlider class="h_margin_top_10" :step="0.01" :min="0.01" :max="100"
              v-model:value="canvasStore.canvasAttr.canvasScale" />
            <NInputNumber class="h_margin_top_10" :step="0.01" :min="0.01" :max="100"
              v-model:value="canvasStore.canvasAttr.canvasScale" />
          </div>
        </div>
        <!-- 画布背景色 -->
        <div class="h_info">
          <text class="h_info_lable">画布背景色:</text>
          <NColorPicker class="h_info_val" v-model:value="canvasStore.canvasAttr.canvasBackColor" :actions="['confirm']"
            :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
        </div>
      </div>

      <!---------------------------|格栅 -->
      <n-divider />

      <div id="CanvasAttrsGrid" class="anchor_link">
        <!-- 格栅[0]格栅模式 gridModel -->
        <div class="h_info">
          <text class="h_info_lable">格栅模式:</text>
          <NSelect class="h_info_val" v-model:value="canvasStore.canvasAttr.gridModel" :options="gridModelOpt" />
        </div>

        <div v-if="gridModel === 2 /*点格栅*/">
          <!-- 格栅间距 GridBisectionCont -->
          <div class="h_info">
            <text class="h_info_lable">格栅间距:</text>
            <div class="h_flex_column h_info_val">
              <NSlider class="h_margin_top_10" :step="1" v-model:value="canvasStore.canvasAttr.gridSpace" />
              <NInputNumber class="h_margin_top_10" :step="1" v-model:value="canvasStore.canvasAttr.gridSpace" />
            </div>
          </div>
          <!-- 格栅点颜色 gridDotColor-->
          <div class="h_info">
            <text class="h_info_lable">格栅点颜色:</text>
            <NColorPicker class="h_info_val" v-model:value="canvasStore.canvasAttr.gridDotColor" :actions="['confirm']"
              :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
          </div>
        </div>

        <div v-if="gridModel === 3 /*方格*/">
          <!-- 格栅样式 gridStyle -->
          <div class="h_info">
            <text class="h_info_lable">格栅样式:</text>
            <NSelect class="h_info_val" v-model:value="canvasStore.canvasAttr.gridStyle" :options="gridStyleOpt" />
          </div>
          <!-- 格栅样式选项:1-像素尺寸 -->
          <div v-if="gridStyle === 1 /*像素尺寸*/">
            <!-- 格栅间距 GridBisectionCont -->
            <div class="h_info">
              <text class="h_info_lable">格栅间距:</text>
              <div class="h_flex_column h_info_val">
                <NSlider class="h_margin_top_10" :step="1" v-model:value="canvasStore.canvasAttr.gridSpace" />
                <NInputNumber class="h_margin_top_10" :step="1" v-model:value="canvasStore.canvasAttr.gridSpace" />
              </div>
            </div>
            <!-- 小格颜色 gridColorMini -->
            <div class="h_info">
              <text class="h_info_lable">小格颜色:</text>
              <NColorPicker class="h_info_val" v-model:value="canvasStore.canvasAttr.gridColorMini" :actions="['confirm']"
                :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
            </div>
            <!-- 大格颜色 gridColorMax -->
            <div class="h_info">
              <text class="h_info_lable">大格颜色:</text>
              <NColorPicker class="h_info_val" v-model:value="canvasStore.canvasAttr.gridColorMax" :actions="['confirm']"
                :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
            </div>
          </div>

          <!-- 格栅样式选项:2-均分画布 -->
          <div v-if="gridStyle === 2 /*均分画布*/">
            <!-- 格栅间距 GridBisectionCont -->
            <div class="h_info">
              <text class="h_info_lable">格栅间距:</text>
              <div class="h_flex_column h_info_val">
                <NSlider class="h_margin_top_10" :step="1" v-model:value="canvasStore.canvasAttr.gridSpace" />
                <NInputNumber class="h_margin_top_10" :step="1" v-model:value="canvasStore.canvasAttr.gridSpace" />
              </div>
            </div>
            <!-- 小格颜色 gridColorMini -->
            <div class="h_info">
              <text class="h_info_lable">小格颜色:</text>
              <NColorPicker class="h_info_val" v-model:value="canvasStore.canvasAttr.gridColorMini" :actions="['confirm']"
                :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
            </div>
            <!-- 大格颜色 gridColorMax -->
            <div class="h_info">
              <text class="h_info_lable">大格颜色:</text>
              <NColorPicker class="h_info_val" v-model:value="canvasStore.canvasAttr.gridColorMax" :actions="['confirm']"
                :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
            </div>
          </div>

          <!-- 格栅样式选项:3-按宽高均分画布 -->
          <div v-if="gridStyle === 3 /*按宽高均分画布*/">
            <!-- 宽等分数 gridBisectionWidthCont -->
            <div class="h_info">
              <text class="h_info_lable">宽等分数:</text>
              <div class="h_flex_column h_info_val">
                <NSlider class="h_margin_top_10" :step="1"
                  v-model:value="canvasStore.canvasAttr.gridBisectionWidthCont" />
                <NInputNumber class="h_margin_top_10" :step="1"
                  v-model:value="canvasStore.canvasAttr.gridBisectionWidthCont" />
              </div>
            </div>
            <!-- 高等分数 gridBisectionWidthCont -->
            <div class="h_info">
              <text class="h_info_lable">高等分数:</text>
              <div class="h_flex_column h_info_val">
                <NSlider class="h_margin_top_10" :step="1"
                  v-model:value="canvasStore.canvasAttr.gridBisectionHeightCont" />
                <NInputNumber class="h_margin_top_10" :step="1"
                  v-model:value="canvasStore.canvasAttr.gridBisectionHeightCont" />
              </div>
            </div>
            <!-- 小格颜色 gridColorMini -->
            <div class="h_info">
              <text class="h_info_lable">小格颜色:</text>
              <NColorPicker class="h_info_val" v-model:value="canvasStore.canvasAttr.gridColorMini" :actions="['confirm']"
                :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
            </div>
            <!-- 大格颜色 gridColorMax -->
            <div class="h_info">
              <text class="h_info_lable">大格颜色:</text>
              <NColorPicker class="h_info_val" v-model:value="canvasStore.canvasAttr.gridColorMax" :actions="['confirm']"
                :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
            </div>
          </div>
        </div>
      </div>

      <!---------------------------|光标 -->
      <n-divider />
      <div id="CanvasAttrsCursor" class="anchor_link">
        <!-- 显示光标-->
        <div class="h_info">
          <text class="h_info_lable">显示光标:</text>
          <NSwitch class="h_info_val" v-model:value="canvasStore.canvasAttr.isShowCursor" @click="onShowCursorHandel()" />
        </div>
        <!-- 光标颜色 -->
        <div class="h_info" v-if="isShowCursor">
          <text class="h_info_lable">光标颜色:</text>
          <NColorPicker class="h_info_val" v-model:value="canvasStore.canvasAttr.cursorColor" :actions="['confirm']"
            :modes="['rgb']" :swatches="colorOpt" :show-alpha="true" />
        </div>
        <!-- 光标盒尺寸 -->
        <div class="h_info">
          <text class="h_info_lable">光标盒尺寸:</text>
          <div class="h_flex_column h_info_val">
            <NSlider class="h_margin_top_10" :step="1" v-model:value="canvasStore.canvasAttr.cursorBoxSize" />
            <NInputNumber class="h_margin_top_10" :step="1" v-model:value="canvasStore.canvasAttr.cursorBoxSize" />
          </div>
        </div>
        <!-- 光标线宽度 -->
        <div class="h_info" v-if="isShowCursor">
          <text class="h_info_lable">光标线宽度:</text>
          <div class="h_flex_column h_info_val">
            <NSlider class="h_margin_top_10" :step="0.01" v-model:value="canvasStore.canvasAttr.cursorLineWidth" />
            <NInputNumber class="h_margin_top_10" :step="0.01" v-model:value="canvasStore.canvasAttr.cursorLineWidth" />
          </div>
        </div>
        <!-- 光标长度 -->
        <div class="h_info" v-if="isShowCursor">
          <text class="h_info_lable">光标长度:</text>
          <div class="h_flex_column h_info_val">
            <NSlider class="h_margin_top_10" :min="0" :max="sliderMax"
              v-model:value="canvasStore.canvasAttr.cursorLang" />
            <NInputNumber class="h_margin_top_10" :min="0" :max="sliderMax" :step="sliderStep"
              v-model:value="canvasStore.canvasAttr.cursorLang" />
          </div>
        </div>
      </div>

      <!---------------------------|捕捉 -->
      <n-divider />
      <div id="CanvasAttrsCatch" class="anchor_link">
        <!-- 捕捉[0]捕捉 isCatch-->
        <div class="h_info">
          <text class="h_info_lable">格栅捕捉:</text>
          <NSwitch class="h_info_val" v-model:value="canvasStore.canvasAttr.isCatch" />
        </div>
        <!-- 捕捉[1]捕捉距离 catchRange-->
        <div class="h_info" v-if="isCatch && gridModel === 1 /*无格栅*/">
          <text class="h_info_lable">捕捉距离:</text>
          <div class="h_flex_column h_info_val">
            <NSlider class="h_margin_top_10" :step="1" v-model:value="canvasStore.canvasAttr.catchRange" />
            <NInputNumber class="h_margin_top_10" :step="1" v-model:value="canvasStore.canvasAttr.catchRange" />
          </div>
        </div>
        <n-divider />
        <!-- 上左  上 上右 -->
        <div class="h_flex_row_between">
          <!-- 捕捉[5]捕捉到-上左点 catchUpLeft-->
          <div class="h_flex_row_between">
            <text>上左:</text>
            <NSwitch v-model:value="canvasStore.canvasAttr.catchUpLeft" />
          </div>
          <!-- 捕捉[6]捕捉到-上点 catchUp-->
          <div class="h_flex_row_between">
            <text>上:</text>
            <NSwitch v-model:value="canvasStore.canvasAttr.catchUp" />
          </div>
          <!-- 捕捉[7]捕捉到-右点 catchRight-->
          <div class="h_flex_row_between">
            <text>上右:</text>
            <NSwitch v-model:value="canvasStore.canvasAttr.catchUpRight" />
          </div>
        </div>
        <!-- 左  中 右 -->
        <n-divider />
        <div class="h_flex_row_between">
          <!-- 捕捉[2]捕捉到-端点 CatchStart-->
          <div class="h_flex_row_between">
            <text>左:</text>
            <NSwitch v-model:value="canvasStore.canvasAttr.catchLeft" />
          </div>
          <!-- 捕捉[3]捕捉到-中心点 CatchMidlet-->
          <div class="h_flex_row_between">
            <text>中:</text>
            <NSwitch v-model:value="canvasStore.canvasAttr.catchMidle" />
          </div>
          <!--  捕捉[4]捕捉到-终点 CatchEnd-->
          <div class="h_flex_row_between">
            <text>右:</text>
            <NSwitch v-model:value="canvasStore.canvasAttr.catchRight" />
          </div>
        </div>
        <n-divider />
        <!--  下右 下 下左 -->
        <div class="h_flex_row_between">
          <!-- 捕捉[8]捕捉到-下右点 catchDownRight-->
          <div class="h_flex_row_between">
            <text>下右:</text>
            <NSwitch v-model:value="canvasStore.canvasAttr.catchDownRight" />
          </div>
          <!-- 捕捉[9]捕捉到 下点 catchDown-->
          <div class="h_flex_row_between">
            <text>下:</text>
            <NSwitch v-model:value="canvasStore.canvasAttr.catchDown" />
          </div>

          <!-- 捕捉[10]捕捉到 下左点 catchDownLeft-->
          <div class="h_flex_row_between">
            <text>下左:</text>
            <NSwitch v-model:value="canvasStore.canvasAttr.catchDownLeft" />
          </div>
        </div>
      </div>
    </div>

    <div class="down_canvas_right">
      <text style="height: 16px;width: 100%;text-align: center;color: #fff;">缩略图</text>
      <canvas></canvas>
    </div>
  </div>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import * as d3 from "d3";
import { reactive, ref, toRefs, computed, watch, nextTick, onMounted } from "vue";
import { AnchorInst } from "naive-ui";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import {
  onGetDataManagerIcon,
  onCreateNewPage,      // 创建新页面
  onCopyPageCanvasInfo, // 复制_画布参数
  onPastePageCanvasInfo,// 粘贴_画布参数
  onShowCursorHandel,
} from "@/functions";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { useMenuStore } from "@/store/menuStore"; // 菜单
import { useProjectStore } from "@/store/projectStore"; // 工程
import { useCanvasStore } from "@/store/canvasStore"; // 画布
import { useStaticStore } from "@/store/staticStore"; // 静态

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const menuStore = useMenuStore(); // 菜单
const projectStore = useProjectStore(); // 工程
const canvasStore = useCanvasStore(); // 画布
const staticStore = useStaticStore(); // 静态

/* ================================================================================================ */
//                                 ★变量
/* ================================================================================================ */
/** 最小值 */
let sliderMin = computed(() => canvasStore.sliderMin);
/** 最大值 */
let sliderMax = computed(() => canvasStore.sliderMax);
/** 步距值 */
let sliderStep = computed(() => canvasStore.sliderStep);

/** 格栅模式 */
let gridModel = computed(() => canvasStore.canvasAttr.gridModel);
/** 格栅样式 */
let gridStyle = computed(() => canvasStore.canvasAttr.gridStyle);
/** 显示光标 */
let isShowCursor = computed(() => canvasStore.canvasAttr.isShowCursor);
/** 捕捉 */
let isCatch = computed(() => canvasStore.canvasAttr.isCatch);
/** 图标尺寸 */
const IconSize = 36;
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 从静态存储 引入 选项
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/** 页面尺寸选项 */
const pageSizeOpt = staticStore.pageSizeOpt;
/** 颜色选项卡 */
const colorOpt = staticStore.colorOpt;
/** 格栅模式选项 */
const gridModelOpt = staticStore.gridModelOpt;
/** 格栅样式选项 */
const gridStyleOpt = staticStore.gridStyleOpt;

</script>

<style lang="scss" scoped>
/* 引入共用css */
@import "@/assets/h.scss";

// 导航树
.down_canvas {
  width: 100%;
  max-height: 250px;
  display: flex;
  flex-direction: row;
  justify-content: start;
  background-color: rgb(80, 80, 80);
  overflow: hidden;
  user-select: none;

  //下部左
  .down_canvas_left {
    max-height: 250px;
    width: 150px;
    margin-left: 10px;
    overflow-x: hidden;
    overflow-y: scroll;
    /* firefox */
    scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
    scrollbar-width: auto;

    /* chrome */
    &::-webkit-scrollbar,
    &::-webkit-scrollbar-track-piece {
      background-color: transparent;
    }

    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background-color: rgb(197, 197, 197);
    }
  }

  //下部中
  .down_canvas_middle {
    max-height: 250px;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    /* firefox */
    scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
    scrollbar-width: auto;

    /* chrome */
    &::-webkit-scrollbar,
    &::-webkit-scrollbar-track-piece {
      background-color: transparent;
    }

    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background-color: rgb(197, 197, 197);
    }
  }

  .down_canvas_right {
    max-height: 250px;
    width: 600px;
    border: 1px solid rgb(197, 197, 197);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
  }
}

// 锚点链接
.anchor_link {
  margin: 0px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
}

//工具
.container_tool {
  margin: 10px;
  display: flex;
  flex-direction: row;

  justify-content: space-around;
}

// 参数
.h_info {
  padding: 5px;
  width: 100%;
  user-select: none;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}

// 参数标题
.h_info_lable {
  padding-left: 3px;
  width: 150px;
}

// 参数变量
.h_info_val {
  width: 100%;
  margin-right: 16px;
}
</style>
